<div class='row6 contain z1 hide-mobile'>
  <div id='example-map' class='pin-bottom pin-top round-top'></div>
  <div id='example-snippet' class='pin-bottom margin2 col8 row4'>
    <div class='clip row4 fill-light pad2x js-replace-token'>
{% highlight html %}
<script>
// Provide your access token
L.mapbox.accessToken = '<your access token here>';
// Create a map in the div #map
L.mapbox.map('map', 'username.mapid');
</script>
{% endhighlight html %}
    </div>
  </div>
</div>
<div class='pad2 prose round-bottom keyline-all fill-white space-bottom contain center'>
  <h2 class='space-bottom1'>
  Build anything with Mapbox.js,<br/>
  a library for fast &amp; interactive maps.
  </h2>
  <div class='clearfix'>
    <div class='col4 pad1 center'>
      <span class='small-graphic dot fill-green inline pad1 dark space-bottom1'>
        <span class='icon big leaflet'></span>
      </span>
      <div class='col12'>
        <strong>Built on top of <a href='http://leafletjs.com/'>Leaflet</a></strong>, an open source library.
      </div>
    </div>

    <div class='col4 pad1 center'>
      <span class='small-graphic dot fill-blue inline pad1 dark space-bottom1'>
        <span class='icon big github'></span>
      </span>
      <div class='col12'>
        <strong>Open source</strong> and available on <a href='https://github.com/mapbox/mapbox.js/'>GitHub</a>.
      </div>
    </div>

    <div class='col4 pad1 center'>
      <span class='small-graphic dot fill-purple inline pad1 dark space-bottom1'>
        <span class='icon big check'></span>
      </span>
      <div class='col12'>
        <strong>Browser tested</strong> with IE8+ and all <a href='http://browsehappy.com/'>modern browsers</a>.
      </div>
    </div>
  </div>
</div>

<div class='keyline-all fill-darken0 space-bottom round'>
  <div class='pad1y pad2x keyline-bottom strong small clearfix'>
    <span class='fill-darken1 pad1x round dark inline fr'>mapbox.js {{site.mapboxjs}}</span>
    Get started
  </div>
  <div class='pad1'>
    <div class='space-bottom1'>{% highlight html %}
<script src='{{site.tileApi}}/mapbox.js/{{site.mapboxjs}}/mapbox.js'></script>
<link href='{{site.tileApi}}/mapbox.js/{{site.mapboxjs}}/mapbox.css' rel='stylesheet' />{% endhighlight html %}
    </div>
    <div class='pad1x small quiet'>
    Include mapbox.js and CSS in your HTML header and call <code>L.mapbox.map('map', '{{site.defaultid}}')</code> to load your first map. <a class='truncate rcon next' href='{{site.baseurl}}/example/v1.0.0/'>View simple example</a>
    </div>
  </div>
</div>

<script>
$(function load() {
    L.mapbox.map('example-map', '{{site.defaultid}}', {
      attributionControl: false,
      scrollWheelZoom: false,
      center: [40.70, -73.98],
      zoom: 14
    });

    var mapid = App.storage('map.id'),
        exampleid = 'username.mapid';

    if (mapid && (mapid || '').indexOf(App.user.id) === 0) {
        exampleid = mapid;
    }

    // Replace username.mapid with the current one.
    $('pre, code').each(function() {
        $(this).html($(this).html().replace(/username.mapid/g, exampleid));
    });
});
</script>

<style>
#example-snippet {
  box-shadow:rgba(0,0,0,0.1) 0 -10px 10px 5px;
  z-index:100;
  }
#example-snippet:before,
#example-snippet:after {
  content:'';
  display:block;
  position:absolute;
  }
#example-snippet:before {
  left:20px; right:0px;
  top:-20px; height:20px;
  background:#f8f8f8;
  }
#example-snippet:after {
  width:0px; height:0px;
  border-width:10px;
  border-color:transparent #e8e8e8 #e8e8e8 transparent;
  border-style:solid;
  position:absolute;
  left:0px; top:-20px;
  }
#example-snippet .highlight { width:200%; }
.highlight pre { background-color:#f8f8f8; }
</style>
